<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <link rel="stylesheet" href="../../lib/theme/style.css">
    <link rel="stylesheet" href="../../lib/css/swiper.min.css">
    <link rel="stylesheet" href="../../lib/iconfont/iconfont.css">
    <style>
        .swiper-container {
            width: 100%;
            height: 100%;
        }
        
        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;
            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
        }
    </style>
</head>

<body>
    <div id="app" class="con extracurricular">
        <div class="searchHeader">
            <div>
                <span class="iconfont icon-search"></span>
                <span>请输入内容</span>
                <span class="iconfont icon-camera"></span>
            </div>
            <a href="#">
                <span class="iconfont icon-commentfill"></span>
                <span class="b"></span>
            </a>
        </div>
        <div class="banner swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="../../lib/image/testImg.jpeg" alt="">
                </div>
            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
        </div>
        <lists :info="info" :clicks="clicks"></lists>
        <fx :fxinfo="fxinfo" :fxclick="fxclick"></fx>
        <jxkc :list="list" :gd="gd" :jxkcclick="jxkcclick"></jxkc>
        <tab :info="infoss" :clicks="clickTab" :type="type"></tab>
        <worklists :worklist="workList" :goto="goto"></worklists>

    </div>
    <script type="text/javascript" src="../../lib/js/maps.js"></script>
    <script src="../../lib/js/mui.min.js"></script>
    <script src="../../lib/js/vue.min.js"></script>
    <script src="../../lib/js/jquery.min.js"></script>
    <script src="../../lib/js/swiper.min.js"></script>
    <script src="../../lib/js/vue-router.js"></script>

    <script src="../../lib/js/assembly.js"></script>
    <script src="../../lib/js/config.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                workList: [
                    //     {
                    //     src: '../../lib/image/testImg.jpeg',
                    //     name: '大庆市睿思幼儿园',
                    //     f: '5',
                    //     q: '龙凤区',
                    //     j: '34',
                    //     id: 1
                    // }, {
                    //     src: '../../lib/image/testImg.jpeg',
                    //     name: '大庆市睿思幼儿园',
                    //     f: '5',
                    //     q: '龙凤区',
                    //     j: '34',
                    //     id: 1
                    // }, {
                    //     src: '../../lib/image/testImg.jpeg',
                    //     name: '大庆市睿思幼儿园',
                    //     f: '5',
                    //     q: '龙凤区',
                    //     j: '34',
                    //     id: 1
                    // }, 
                ],
                info: [{
                    name: '运动',
                    id: 1,
                    src: '../../lib/image/tx.jpg'
                }, {
                    name: '才艺',
                    id: 1,
                    src: '../../lib/image/tx.jpg'
                }, {
                    name: '益智',
                    id: 1,
                    src: '../../lib/image/tx.jpg'
                }, {
                    name: '语言',
                    id: 1,
                    src: '../../lib/image/tx.jpg'
                }, {
                    name: '娱乐',
                    id: 1,
                    src: '../../lib/image/tx.jpg'
                }, ],
                fxinfo: {
                    'one': {
                        'src': '../../lib/image/yxxj.png',
                        'id': 1
                    },
                    'two': {
                        'src': '../../lib/image/xy.png',
                        'id': 2
                    },
                    'there': {
                        'src': '../../lib/image/xy.png',
                        'id': 3
                    },
                },
                list: [{
                    name: '3-6岁幼儿英语快速成长',
                    id: 1,
                    look: '3722',
                    src: '../../lib/image/testImg.jpeg'
                }, {
                    name: '3-6岁幼儿英语快速成长',
                    id: 1,
                    look: '3722',
                    src: '../../lib/image/testImg.jpeg'
                }, {
                    name: '3-6岁幼儿英语快速成长',
                    id: 1,
                    look: '3722',
                    src: '../../lib/image/testImg.jpeg'
                }, ],
                infoss: [{
                    'name': '距离最近',
                    'id': 'nearest',
                }, {
                    'name': '评分最高',
                    'id': 'highest_score',
                }, {
                    'name': '最多关注',
                    'id': 'most_attention',
                }, ],
                type: 'nearest'
            },
            created() {
                getLocation(function(res) {
                    console.log(res)
                })
                this.getinstitutiontypelist();
                this.getGradeList();
                this.getList();
            },
            methods: {
                getGradeList() { //获取精选课程
                    console.log(getItem('USERINFO').memberInfo.childs[0])
                    var data = {
                        t_course_high_grade: getItem('USERINFO').memberInfo.childs[0].t_class_id
                    }
                    post('/rest/course/high_grade_list', data, function(res) {
                        console.log(res)
                        this.list = res.dataList
                    }.bind(this))
                },
                getList() { //获取机构列表
                    var data = {
                        latitude: getItem('latitude'), //用户所在位置的维度，非空
                        longitude: getItem('longitude'), //用户所在位置的精度，非空
                        display_by: this.type, //排序方式，可选值有“nearest”--最近、“highest_score”--评分最高、“most_attention”--关注数量，默认按“距离最近”显示
                        searchName: '', //按机构名，模糊查询，可选填。
                    }
                    post('/rest/institution/list', data, function(res) {
                        console.log(res)
                        this.workList = res.dataList
                    }.bind(this))
                },
                getinstitutiontypelist() { //获取机构类型
                    post('/rest/institution/institution_type_list', {}, function(res) {
                        console.log(res)
                        this.info = res.dataList
                    }.bind(this))
                },
                clicks(e) {
                    // console.log(e)
                    console.log(this.info[e].id)
                    mui.openWindow({
                        url: 'examples/info.html',
                        id: 'info'
                    });
                },
                fxclick(e) {
                    console.log(e)
                },
                jxkcclick(e) {
                    console.log(e)
                },
                gd() {
                    console.log("gd")
                },
                clickTab(e, index) {
                    console.log(e)
                    this.type = e.target.dataset.id
                    this.getList()
                },
                goto(e) {
                    console.log(e)
                }
            }
        })
        var swiper = new Swiper('.swiper-container', {
            pagination: {
                el: '.swiper-pagination',
            },
        });
    </script>
</body>

</html>